<template>
  <div class="bg-grey w-full h-full">
    <!-- 展示图 -->
    <div class="p-b-100 bg-grey">
      <div class="relative">
        <div
          @click="$router.go(-1)"
          class="bg-rgba-black absolute left-10 top-10 z-index-10 b-round p-12 flex a-center"
        >
          <van-icon class="text-white" name="arrow-left" />
        </div>
        <img class="w-full min-h-100" :src="detail.picture" alt />
        <van-skeleton :row="2" :loading="!ready">
          <div
            v-if="ready && detail.sptz.length > 0"
            class="w-full bg-rgba-black absolute bottom-0 left-0 w-full flex p-5 p-h-10 text-white fs-rem-12px o-x-scroll scroll-touch"
          >
            <div
              v-for="item in detail.sptz"
              :key="item"
              class="bg-black b-r-3 p-v-2 p-h-10 flex-s-0 m-r-8"
            >{{item}}</div>
          </div>
        </van-skeleton>
      </div>
      <!-- 价格标题 -->
      <van-skeleton :row="4" :loading="!ready" class="m-t-20">
        <div class="bg-white flex j-between a-center p-10">
          <div>
            <div v-if="detail.yhtype === 1">
              <p>
                <span class="text-red fs-rem-18px">折扣 {{detail.zk / 10}}折</span>
                <span class="text-grey fs-rem-13px m-l-5" v-if="detail.fprice">
                  门市价
                  <s>¥{{detail.fprice}}</s>
                </span>
              </p>
            </div>
            <div v-else>
              <p class="text-red fs-rem-18px">
                折扣价 ¥{{detail.nprice}}
                <s class="text-grey fs-rem-12px m-l-5">¥{{detail.fprice}}</s>
              </p>
            </div>
            <p class="text-content fs-rem-14px overflow-many p-t-15">{{detail.gname}}</p>
          </div>
          <div class="m-l-10">
            <p class="text-red fs-rem-18px bg-lightred p-10 p-h-15 b-r-10">折扣券</p>
            <p class="h-1 b-b-dashed b-b b-red m-h-10"></p>
            <div class="bg-lightred p-10 p-h-15 b-r-10">
              <van-button
                class="w-full"
                v-if="detail.status === 1"
                size="small"
                round
                type="danger"
                :disabled="detail.status === 2 || detail.hasGetDiscounts"
                @click="handleGetDiscounts(detail)"
              >{{detail.hasGetDiscounts ? '已领取' : '领取'}}</van-button>
              <van-button
                v-if="detail.status === 2"
                size="small"
                round
                type="danger"
                :disabled="detail.status === 2"
              >已下架</van-button>
            </div>
          </div>
        </div>
      </van-skeleton>
      <!-- 消费选项 -->
      <van-skeleton :row="2" :loading="!ready" class="m-t-20">
        <div class="bg-white m-t-10 p-10 flex">
          <p class="fs-rem-12px text-grey min-w-50">服务</p>
          <div class="m-l-10 text-content">
            <p>
              <van-tag plain type="danger">日预约限额</van-tag>
              <span class="fs-rem-12px m-l-10">名额还剩{{detail.yye}}{{detail.unit}}</span>
            </p>
          </div>
        </div>
      </van-skeleton>
      <!-- 取货地址 -->
      <van-skeleton :row="2" :loading="!ready" class="m-t-20">
        <div class="bg-white m-t-10 p-10 flex">
          <p class="fs-rem-12px text-grey min-w-50">取货地址</p>
          <p class="fs-rem-12px text-content m-l-10 flex a-center">
            <van-icon name="location" />
            <span class="m-l-3">{{detail.bddress}}</span>
          </p>
        </div>
      </van-skeleton>
      <!-- 描述 -->
      <van-skeleton :row="4" :loading="!ready" class="m-t-20">
        <div class="bg-white p-10 m-t-10 flex">
          <p class="fs-rem-12px text-grey min-w-50">商品描述</p>
          <p class="fs-rem-12px text-content m-l-10">{{detail.spms}}</p>
        </div>
      </van-skeleton>
    </div>
    <!-- 店铺 -->
    <div class="w-full bg-white flex a-center j-between p-10 fixed bottom-0 b-t">
      <van-skeleton :row="2" :loading="!ready" class="w-full">
        <div class="flex a-center">
          <img class="w-40 b-round" :src="logo" alt="商家logo" />
          <span class="fs-rem-16px text-content m-l-10">{{detail.bname}}</span>
        </div>
        <van-button :to="`/goods/merchant/${detail.bid}`" size="small" round type="danger">进店逛逛</van-button>
      </van-skeleton>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/images/merchant.jpg'
export default {
  data () {
    return {
      ready: false,
      detail: {},
      logo
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getDetail()
    },
    async getDetail () {
      let { id } = this.$route.params
      let { zxGd } = await this.$api.post('/zxGd/queryById', { id })
      zxGd.sptz = zxGd.sptz !== null ? zxGd.sptz.split(',').filter(d => d !== '') : []
      zxGd.hasGetDiscounts = false
      this.detail = zxGd
      this.ready = true
    },
    async handleGetDiscounts (item) {
      let { message, status } = await this.$api.post('/xf/user/add', {
        gid: item.id
      })
      // 3 没有当前用户
      // 0 成功
      // 4 没有这个商品
      // 5 这个商品已下架
      // 6 会员当天在当前商家已经进行过两次消费
      // 7 该商品库存不足
      if (status === 401) return
      if (status === 0) {
        this.$toast.success(message)
        item.hasGetDiscounts = true
      } else {
        this.$toast.fail(message)
      }
    },
    changeSwiperIndex (index) {
      this.swiperCurrentIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.b-grey {
  border-color: #b3b3b3;
}
.h-33 {
  height: 33px;
}
.bg-lightred {
  background: #ffeddf;
}
</style>
